import { toJS } from 'mobx';
import { Button, Form } from 'antd';
import { WeaTop, WeaRightMenu, WeaTab, WeaSearchGroup, WeaFormItem, WeaCollect, WeaAlertPage } from 'ecCom';
import { WeaSwitch, WeaTableNew } from 'comsMobx';
import * as Bctt from '../constants/BaseListConstant';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

const WeaTable = WeaTableNew.WeaTable;

class BaseList extends React.Component {
  constructor(props) {
    super(props);
  }

  getStore() {

  }

  // render before
  componentWillMount() {
    this.getStore().componentWillMount(this.props.params);
  }

  // render after
  componentDidMount() {
    this.getStore().componentDidMount();
  }

  // component remove before
  componentWillUnmount() {
    this.getStore().componentWillUnmount();
  }

  componentWillReceiveProps(nextProps) {
    const store = this.getStore();
    const oldType = store.routerParams.type;
    const newType = nextProps.params.type;
    // 切换路由或者点击菜单路由刷新组件
    if (oldType !== newType) {
      // component reload
      this.getStore().componentWillUnmount();
      this.getStore().componentWillMount(nextProps.params);
      this.getStore().componentDidMount();
      return;
    }
    const flag = this.props.hasOwnProperty('location');
    if (flag) {
      const keyOld = this.props.location.key;
      const keyNew = nextProps.location.key;
      if (keyOld !== keyNew) {
        // component reload
        this.getStore().componentWillUnmount();
        this.getStore().componentWillMount(nextProps.params);
        this.getStore().componentDidMount();
      }
    }
  }

  render() {
    const store = this.getStore();
    const { loading, viewTop, titleName, titleIcon, showSearchAd, tableStore, searchKey, verified, hasRight, storeVisible } = store;

    if (verified && !hasRight) {
      return (<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@k8kn5l`} >
        <div style={{ color: '#000' }}>
          {getLabel(2012, '对不起，您暂时没有权限！')}
        </div>
      </WeaAlertPage>
      );
    }

    const weaTableProps = {};// WeaTable中的属性集
    weaTableProps.comsWeaTableStore = tableStore;
    weaTableProps.hasOrder = true;
    weaTableProps.needScroll = true;
    weaTableProps.childrenColumnName = 'subListspan';
    if (this.reRenderColumns) { weaTableProps.getColumns = c => this.reRenderColumns(c); }
    if (this.onOperatesClick) { weaTableProps.onOperatesClick = (record, index, operate, flag) => this.onOperatesClick(record, index, operate, flag); }

    const tableCom = <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@5097ir`} {...weaTableProps} />;

    const searchTypes = this.getTabSearchTypes(store);
    let hasBase = false;
    let hasAdvanced = false;
    for (const t in searchTypes) {
      if (searchTypes[t] == Bctt.TAB_SEARCH_TYPE_BASE) {
        hasBase = true;
      }
      if (searchTypes[t] == Bctt.TAB_SEARCH_TYPE_ADVANCED) {
        hasAdvanced = true;
      }
    }
    let tabCom = null;
    const weaTabProps = {};// WeaTab中的属性集
    weaTabProps.buttons = this.getTabButtons(store);
    weaTabProps.searchType = searchTypes;
    let showWeaTab = false;
    if (hasBase) {
      showWeaTab = true;
      weaTabProps.searchsBaseValue = searchKey;
      weaTabProps.onSearch = store.doSearch;
      weaTabProps.onSearchChange = v => store.setSearchKey(v);
    }

    if (hasAdvanced) {
      showWeaTab = true;
      weaTabProps.showSearchAd = showSearchAd;
      weaTabProps.buttonsAd = this.getAdButtons(store,this.props.ecId || '');
      weaTabProps.setShowSearchAd = (bool) => { store.setShowSearchAd(bool); };
      weaTabProps.hideSearchAd = () => store.setShowSearchAd(false);
      weaTabProps.searchsAd = <Form ecId={`${this && this.props && this.props.ecId || ''}_Form@rraukb`} horizontal>{this.getSearchConditionForm(store)}</Form>;
    }
    if (showWeaTab) { tabCom = <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@zkrons`} {...weaTabProps} />; }

    if (verified && hasRight) {
      return (
        <div className="wea-crmReport-base" style={{ height: '100%' }}>
          <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@mhc6o2`} datas={store.getRightMenus()}>
            {
              viewTop && <WeaTop
                ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@ohhit5`}
                loading={loading}
                title={titleName}
                icon={<i className={'icon-coms-crm'} />}
                iconBgcolor="#96358a"
                showDropIcon
                dropMenuDatas={store.getRightMenus()}
                buttons={store.getTopButtons()}
                buttonSpace={10}
              >
                {tabCom}
                {tableCom}
                {this.renderAppend(store)}
              </WeaTop>
            }
            {
              !viewTop && <div>
                {tabCom}
                {tableCom}
                {this.renderAppend(store)}
              </div>
            }
            <WeaCollect
              ecId={`${this && this.props && this.props.ecId || ''}_WeaCollect@1h7ns7`}
              visible={storeVisible}
              favname={titleName}
              favouritetype={4}
              importantlevel={1}
              objid={-1}
              onClose={() => store.hideStoreDialog()}
            />
          </WeaRightMenu>
        </div>
      );
    }
    return <div />;
  }

  // render custom
  renderAppend(store) {
    return [];
  }

  getAdButtons(store,ecId) {
    const { doSearch, setShowSearchAd, clearAdFields } = store;
    return [
      (<Button ecId={`${ecId}_Button@1irrjm@search`} type="primary" onClick={() => { doSearch(); setShowSearchAd(false); }}>{getLabel(197, '搜索')}</Button>),
      (<Button ecId={`${ecId}_Button@9qx3wo@reset`} type="ghost" onClick={() => { clearAdFields(); }}>{getLabel(2022, '重置')}</Button>),
      (<Button ecId={`${ecId}_Button@ks8j8q@cancel`} type="ghost" onClick={() => { setShowSearchAd(false); }}>{getLabel(201, '取消')}</Button>),
    ];
  }

  getTabButtons(store) {
    const arr = [];
    return arr;
  }

  getTabSearchTypes(store) {
    const arr = [];
    return arr;
  }

  getSearchConditionForm(store) {
    const { searchConditionComponents, searchConditionForm } = store;
    const groups = [];
    if (searchConditionComponents) {
      const { isFormInit } = searchConditionForm;
      const formParams = searchConditionForm.getFormParams();
      isFormInit && toJS(searchConditionComponents).map((c,indexGroup) => {
        const items = [];
        c.items.map((fields, index) => {
          items.push({
            com: (<WeaFormItem
              ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@0s5ghx@${index}`}
              label={`${fields.label}`}
              labelCol={{ span: `${fields.labelcol}` }}
              wrapperCol={{ span: `${fields.fieldcol}` }}
            >
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@4pswy0@${index}`} fieldConfig={fields} form={searchConditionForm} formParams={formParams} onChange={store.searchConditionFieldChange} onEnterSearch={this.onEnterSearch.bind(this)} />
            </WeaFormItem>),
            col: 2,
          });
        });
        groups.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@zr9zfb@${indexGroup}`} needTigger title={c.title} showGroup={c.defaultshow} items={items} />);
      });
    }
    return groups;
  }

  onEnterSearch() {
    const store = this.getStore();
    const { doSearch, setShowSearchAd, clearAdFields } = store;
    doSearch();
    setShowSearchAd(false);
  }
}

export default BaseList;
